import { Button, Checkbox, Dropdown, Space, Tooltip } from 'antd'
import { SearchOutlined, ReloadOutlined, UnorderedListOutlined } from '@ant-design/icons'
import { FC, useState } from 'react'
import type { ColType } from '@/pages/table-pages/standard'

interface IProps {
  toggleSearch: () => void
  refreshData: () => void
  changeColumn: (dataIndex:string) => void
  columnData: ColType[]
}
const TableToolBar:FC<IProps> = (props) => {
  const { toggleSearch, refreshData, changeColumn, columnData = [] } = props
  const onSearch = toggleSearch
  const onRefresh = refreshData
  const onChange = changeColumn

  const items = columnData.map((item) => {
    return {
      label: (<Checkbox className="min-w-70" onClick={() => onChange(item.dataIndex)} checked={item?.selected !== false}>{item.title as string}</Checkbox>),
      key: item.dataIndex,
    }
  })

  const [open, setOpen] = useState(false)

  const handleOpenChange = (flag: boolean) => {
    setOpen(flag)
  }
  return (
    <div className="app-table-action-button">
      <Space size={15}>
        <Tooltip title="搜索">
          <Button shape="circle" icon={<SearchOutlined />} onClick={() => onSearch()} />
        </Tooltip>
        <Tooltip title="刷新">
          <Button shape="circle" icon={<ReloadOutlined />} onClick={() => onRefresh()} />
        </Tooltip>
        <Dropdown menu={{ items }} onOpenChange={handleOpenChange} open={open}>
          <Button shape="circle" icon={<UnorderedListOutlined />} />
        </Dropdown>
      </Space>
    </div>
  )
}

export default TableToolBar
